<template>
  <div class="person">
    <h2>姓名: {{ name }}</h2>
    <h2>年龄: {{ age }}</h2>
    <h2>电话: {{ tel }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template> 

<!-- <script lang="ts">

export default {
  name: 'Pserson234',
  // data () {
  //   return {
  //     name: '张三',
  //     age: 18,
  //     tel: '138421412'
  //   }
  // },
  // methods: {
  //   showTel () {
  //     alert(this.tel)
  //   },
  //   changeName () {
  //     this.name = 'zhangsan'
  //   },
  //   changeAge () {
  //     this.age+=1
  //   }
  // },
  // setup () {
  //   // 在beforeCreate之前执行
  //   console.log(this) // undefined

  //   let name = ref<string>('张三')
  //   let age = ref<number>(18)
  //   let tel = ref('13812312321')

  //   const changeName = () => {
  //     name.value = 'zhangsan'
  //   }

  //   const changeAge = () => {
  //     age.value += 1
  //   }

  //   const showTel = () => {
  //     alert(tel.value)
  //   }


  //   return {
  //     name,
  //     age,
  //     tel,
  //     changeName,
  //     changeAge,
  //     showTel
  //   }
  //   // setup的返回值也可以是一个渲染函数
  //   // return () => '哈啊'
  // }
}
</script> -->

<script setup lang="ts" name="Pserson234">
import { ref } from 'vue'
  // 使用setup语法糖, 里面的内容会自动return出去 不需要手动return
  console.log(this) // undefined

    let name = ref<string>('张三')
    let age = ref<number>(18)
    let tel = ref('13812312321')

    const changeName = () => {
      name.value = 'zhangsan'
    }

    const changeAge = () => {
      age.value += 1
    }

    const showTel = () => {
      alert(tel.value)
    }
</script>
<style>
.person {
  background-color: blue;
  box-shadow: 0 0 10px;
  padding: 20px;
}
button {
  margin: 0 5px;

}
</style>